<template>
  <div class="singer-info">
    <div>
      <h2>简 介</h2>
      <div>{{  desc  }}</div>
    </div>
    <div>
      <h2>基本 资料</h2>
      <div>
        <div v-for="(item,  index) in basicItem" :key="index">
          <span>{{  item.key  }}:</span>
          <span style="white-space: pre-wrap">{{  item.value  }}</span>
        </div>
      </div>
    </div>
    <div v-for="(item, index) in otherItem" :key="index">
      <h2>{{  item.key  }}</h2>
      <div style="white-space: pre-wrap">{{ item.value }}</div>
    </div>
  </div>
</template>
<script>
export default  {
  props: ["singeid"],
  data() {
    return {
      desc: "",
      basicItem: [],
      otherItem: [],
    };
  },
  created()  {
    this.getData();
  },
  methods: {
    getData() {
      this.$request("get", "/singer/desc?singermid=" + this.singeid).then(
        (res) => {
          console.log(res);
          this.desc =  res.data.desc;
          this.basicItem =   res.data.basic.item;
          this.otherItem =   res.data.other.item;
        }
      );
    },
  },
};
</script>
<style scoped>
.singer-info {
  text-align: left;
  padding: 0 1rem;
}
</style>